{extend name="../../../view/public/base" /}

{block name="css"}
<style>
    body {
        background-color: #F2F2F2;
    }
    .layui-form-label{
        width: 100px;
    }
    .layui-input-block {
        margin-left: 135px;
    }
</style>
{/block}

{block name="body"}
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <form id="addForm" class="layui-form" lay-filter="addForm" autocomplete="off">

                    <div class='layui-form-item'>
                        <!--生成关联模型-->
                        <div class="layui-inline">
                            <label class='layui-form-label'>生成关联模型</label>
                            <div class='layui-input-block'>
                                <input type='checkbox' lay-skin='primary' title='' lay-filter="openRelation">
                                <input type="hidden" name="isRelation" class="layui-input" value="0">
                            </div>
                        </div>
                    </div>

                    <fieldset class="layui-elem-field layui-field-title">
                        <legend>主表设置</legend>
                    </fieldset>
                    <!--应用名称-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">应用名称</label>
                            <div class="layui-input-block">
                                <select name="app_name" lay-verify="required">
                                    <option value="">请选择应用名称</option>
                                    {volist name="apps" id="vo"}
                                    <option value={$vo}>{$vo}</option>
                                    <br/>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--表名-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">表名</label>
                            <div class="layui-input-block">
                                <select name="table_name" lay-verify="required" id="app_select">
                                    <option value="">请选择表名</option>
                                    {volist name="tables" id="vo"}
                                    <option value={$vo}>{$vo}</option>
                                    <br/>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                    </div>
                    <!--自定义控制器名-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">自定义控制器名</label>
                            <div class="layui-input-block">
                                <input type="text" name="controller_name_diy" placeholder="请输入自定义控制器名"
                                       class="layui-input" value="">
                            </div>
                        </div>
                    </div>
                    <!--自定义模型名-->
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">自定义模型名</label>
                            <div class="layui-input-block">
                                <input type="text" name="model_name_diy" placeholder="请输入自定义模型名" class="layui-input"
                                       value="">
                            </div>
                        </div>
                    </div>

                    <div id="relation" class="layui-hide">
                        <fieldset class="layui-elem-field layui-field-title">
                            <legend>关联表设置</legend>
                        </fieldset>

                        <div id="relation_item">
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <button class="layui-btn layui-btn-sm layui-bg-black" type="button" onclick="addRelation()">追加关联模型</button>
                            </label>
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="submitBtn">立即提交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var layer, form, bwajax, upload, $, laydate;

    var relation_count = 0;

    layui.use(['layer', 'form', 'bwajax', 'upload', 'laydate'], function () {
        layer = layui.layer;
        form = layui.form;
        bwajax = layui.bwajax.instance();
        upload = layui.upload;
        $ = layui.jquery;
        laydate = layui.laydate;

        form.on('checkbox(openRelation)', function (obj) {
            if (obj.elem.checked) {
                $("[name='isRelation']").attr('value', 1);
                $('#relation').removeClass('layui-hide');
            }
            else {
                $("[name='isRelation']").attr('value', 0);
                $('#relation').addClass('layui-hide');
            }
        })

        //TODO 监听提交按钮
        form.on('submit(submitBtn)', function (obj) {
            data = obj.field;
            if(!data.app_name) {layer.msg('应用名称不能为空', {icon: 2});return false}
            if(!data.table_name) {layer.msg('表名不能为空', {icon: 2});return false}
            /*if(!data.controller_name_diy) {layer.msg('自定义控制器名不能为空', {icon: 2});return false}
            if(!data.model_name_diy) {layer.msg('自定义模型名不能为空', {icon: 2});return false}
            if(!data.status) {layer.msg('状态不能为空', {icon: 2});return false}*/

            data.relation = [];
            /*data.relation = [{
                'relation': 'bw_crud_demo_cate',
                'relationmode': 'belongsto',
                'relationforeignkey': 'cate_id',
                'relationprimarykey': 'id',
                'relationfields': 'name'
            }, {
                'relation': 'bw_crud_demo_catee',
                'relationmode': 'hasone',
                'relationforeignkey': 'id',
                'relationprimarykey': 'cate_id',
                'relationfields': 'headimage'
            }
            ];*/

            //TODO ajax调用后台接口
            bwajax.post("{:Url('/manage/admin/sysCrud/add')}",  $('#addForm').serialize())
                .then(function (response) {
                    if (response.data.data.errcode === 0) {
                        layer.msg('提交成功', {icon: 1});
                        submitSuccess();
                    } else {
                        layer.msg(response.data.msg, {icon: 2});
                    }
                })

            return false;
        })
    });

    function addRelation() {
        relation_count++;

        var div_id = 'relation_item_' + relation_count;
        var text = "";
        text += "<div id='" + div_id + "'>";
        text += "                                <div class=\"layui-form-item\">";
        text += "                                    <div class=\"layui-inline\">";
        text += "                                        <label class=\"layui-form-label\">关联表</label>";
        text += "                                        <div class=\"layui-input-block\">";
        text += "                                    <select name=\"relation[]\">";
        text +=                                        $("#app_select").html();
        text += "                                    </select>";
        text += "                                        </div>";
        text += "                                    </div>";
        text += "                                    <div class=\"layui-inline\">";
        text += "                                        <label class=\"layui-form-label\">关联类型</label>";
        text += "                                        <div class=\"layui-input-block\">";
        text += "                                    <select name=\"relationmode[]\">";
        text += "                                      <option value=\"\"></option>";
        text += "                                      <option value=\"hasOne\" selected=\"\">hasOne</option>";
        text += "                                      <option value=\"belongsTo\">belongsTo</option>";
        text += "                                    </select>";
        text += "                                        </div>";
        text += "                                    </div>";
        text += "                                    <div class=\"layui-inline\">";
        text += "                                        <label class=\"layui-form-label\">关联外键</label>";
        text += "                                        <div class=\"layui-input-block\">";
        text += "                                            <input type=\"text\" name=\"relationforeignkey[]\" placeholder=\"请输入关联外键\" class=\"layui-input\" value=\"\">";
        text += "                                        </div>";
        text += "                                    </div>";
        text += "                                    <div class=\"layui-inline\">";
        text += "                                        <label class=\"layui-form-label\">关联主键</label>";
        text += "                                        <div class=\"layui-input-block\">";
        text += "                                            <input type=\"text\" name=\"relationprimarykey[]\" placeholder=\"请输入关联主键\" class=\"layui-input\" value=\"\">";
        text += "                                        </div>";
        text += "                                    </div>";
        text += "                                </div>";
        text += "                                <!--显示字段-->";
        text += "                                <div class=\"layui-form-item\">";
        text += "                                    <label class=\"layui-form-label\">显示字段</label>";
        text += "                                    <div class=\"layui-input-block\">";
        text += "                                        <input type=\"text\" name=\"relationfields[]\" placeholder=\"请输入显示字段\" class=\"layui-input\" value=\"\">";
        text += "                                    </div>";
        text += "                                <!--移除-->";
        text += "                                <div class=\"layui-form-item\">";
        text += "                                    <label class=\"layui-form-label\"><button class=\"layui-btn layui-btn-sm layui-bg-black\" type=\"button\" onclick=\"removeDiv('" + div_id + "')\">移除</button></label>";
        text += "                                </div>";
        text += "                            </div></div>";

        $('#relation_item').append(text);
        form.render(); //更新全部
    }

    function removeDiv(id) {
        $('div#'+id).remove();
    }
</script>
{/block}